import './styles/main.css';

const appContainer = document.getElementById('app');

// 创建一个容器元素
const container = document.createElement('div');
container.className = 'container';

// 添加标题
const title = document.createElement('h1');
title.textContent = 'JavaScript Q&A';

// 创建问题卡片
const questionCards = [
    {
        question: 'What is the result of 5 + 3?',
        answer: '8',
        correct: true
    },
    {
        question: 'What is the result of 7 - 2?',
        answer: '5',
        correct: false
    },
    {
        question: 'What is the result of 4 * 2?',
        answer: '8',
        correct: true
    }
];

const questionContainer = document.createElement('div');
questionContainer.className = 'question-container';

questionCards.forEach(card => {
    const questionCard = document.createElement('div');
    questionCard.className = 'question-card';
    questionCard.dataset.correct = card.correct;

    questionCard.textContent = card.question;

    const answer = document.createElement('div');
    answer.className = 'answer';
    answer.textContent = `The correct answer is ${card.answer}.`;

    questionCard.appendChild(answer);

    questionCard.addEventListener('click', () => {
        answer.style.display = 'block';
        questionCard.classList.toggle('card--active');
        if (card.correct) {
            answer.classList.add('correct');
        } else {
            answer.classList.add('incorrect');
        }
    });

    questionContainer.appendChild(questionCard);
});

// 添加内容到容器
container.appendChild(title);
container.appendChild(questionContainer);

appContainer.appendChild(container);

